<template>
  <div class="bargain-add views-container">
    <div class="wlm-form">

      <div class="wlm-form-content">
        <div v-for="(item,index) in roots" :key="index">
          <!-- {{item}} -->
          <!-- {{patSetting.plugin.coupon.open}} -->
          <div style="margin:10px 0 0 10px;font-size:15px;" v-if="!hidden[index]">{{item.title}}</div>
          <div style="display:flex;flex-wrap:wrap;">
            <div v-for="(root,i) in item.rootes" :key="i" >
              <!-- {{root}} -->
              <router-link tag="span" :to="root.path" v-if="!!root.hidden">
                  <div @click="sidebar(root.root) " style="margin:10px 10px 10px 10px;">
                      <!-- 存在agent_id就把炮灰域名和直播隐藏掉 -->
                      <!-- {{patSetting.plugin.coupon.open}} -->
                      <!-- v-if="!!$agent &&(root.title=='炮灰域名' || root.title=='直播' ||root.title=='限时抢券') ?root.hidden=false:root.hidden=true" -->
                    <div class="lihe-box" >
                    <!-- <div class="lihe-box" v-if="!!$agent &&(root.title=='炮灰域名' || root.title=='直播'|| (patSetting.plugin.coupon.open==false&&root.title=='限时抢券')) ?root.hidden=false:root.hidden=true"> -->
                      <img :src="root.param.app_path" width="50px" height="50px" style="border-radius: 50%;"/>
                      <div style="margin-left:10px;">
                        <div style="font-weight: bold;font-size: 16px;">{{root.title}}</div>
                        <div class="two-line-hide">{{root.param.describe}}</div>
                      </div>
                    </div>
                  </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { asyncPluginsMap } from "@/router";
import Cookies from 'js-cookie'
import power from '@/mixins/power'
export default {
  name:'newapplication',
  mixins:[power],
  created() {
    this.rootsHandel();
  },
  data() {
    return {
      haveRunIndex:[],//已经运行的index
      isActive:'',
      isActiveIndex:'',
      roots: {
        marketing: {
          title: "营销玩法",
          rootes: [],
          hidden:true,
        },
        customer: {
          title: "客服维群",
          rootes: [],
          hidden:true,
        },
        tool: {
          title: "配套工具",
          rootes: [],
          hidden:true,
        },
      },
      hidden:{
        marketing:true,
        customer:true,
        tool:true,
      }
    };
  },
  watch: {
    'patSetting':{
      handler(newData, oldData) {
        console.log('群贤',newData,oldData);
        for(let key in this.roots){
        if(!!this.roots[key].rootes){
          this.roots[key].rootes.map((root,i) => {
            if(
              (root.app_index===true || (root.app_index in newData.plugin && !!newData.plugin[root.app_index].open))
            ){
              // console.log('roorootrootrootroott',root);
              // //处理在代理端时，不显示炮灰域名，直播，在开启优惠券时也显示限时抢券(已废弃)        现在炮灰域名，直播，限时抢券也有权限了
              // if(!!Cookies.get("agent_id") &&(root.title=='炮灰域名' || root.title=='直播' ||(newData.plugin.coupon.open==false&&root.title=='限时抢券'))){
              //   root.hidden=false
              // }else{
              //   // 应用卡显示
              //   root.hidden = true;
              // }
              root.hidden = true;
              //处理营销玩法，客服维群，配套工具是否显示
              if(root.hidden && this.hidden[key]){
                this.hidden[key] = false
              }
              }else{
                root.hidden = false;
              }
          })
        }

      }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
      $agent(){
        //获取cooking中的agent_id
        return Cookies.get("agent_id")
      }
  },
  methods: {
    // hiddenIf(bool,index){
    //   console.log('记录',this.haveRunIndex, this.haveRunIndex[this.haveRunIndex.length - 1]);
    //   if(this.haveRunIndex.indexOf(index) == -1 || index == this.haveRunIndex[this.haveRunIndex.length - 1]){
    //     //说明一轮未走完，进行正常的赋值处理
    //     if(bool && this.hidden[index]){
    //       this.$set(this.hidden,index,false)
    //       // this.roots[index]['hidden'] = false;
    //       console.log('修改显示',index,this.hidden[index]);
    //     }
    //   }else{
    //     console.log('新一轮');
    //     this.haveRunIndex = [];
    //     //新的一轮，需要初始化小标题的hidden
    //     this.hidden.marketing = true;
    //     this.hidden.customer = true;
    //     this.hidden.tool = true;
    //   }

    //   if(this.haveRunIndex.indexOf(index) == -1){
    //         this.haveRunIndex.push(index);
    //   }
    //   /**
    //    * 因为次方法会走至少1轮以上，所以不能直接判断处理赋值
    //    * 处理方法：
    //    * 1、将当前正在执行的下标记录起来，将已经执行的下标记录起来
    //    * 2、如果当前执行下标等于已经执行的下标数据中的最后一个元素，或者当前正在执行的下标不存在于已经执行的下标数组中，那么说明当前一轮循环并未走完
    //    * 3、正常处理判断赋值
    //    * 4、如果一轮走完重新初始化小标题的hidden
    //    */
    //   console.log('判断',bool,this.hidden[index],index);
    //   return bool;
    // },
    mouseEnter(index,i){
      this.isActiveIndex = index
      this.isActive = i
      console.log(this.isActiveIndex,this.isActive,'isActiveisActiveisActive');
    },
    mouseLeave(){
      this.isActive = null
    },
    /**
     * 点击跳转获取对应三级路由
     */
    sidebar(data) {
      // 获取子路由
      const children = data.meta instanceof Object && !!data.meta.display && !!data.meta.display.children ? data.meta.display.children : [],
          childrenRoot = [];


      //遍历路由
      //存在应用路由
      if (asyncPluginsMap instanceof Array && asyncPluginsMap.length > 0) {
        //存在子路由
        if (
          asyncPluginsMap[0] instanceof Object &&
          !!asyncPluginsMap[0].children
        ) {
          const rootPaths = asyncPluginsMap[0].children,
            roots = this.roots;

          rootPaths.map((root) => {
            // 主模块，并且模块存在
            // console.log('点击后',root)
            children.map(res => {
              if(res == root.name){
                // (root.app_index===true || (root.app_index in patSetting.plugin && !!patSetting.plugin[root.app_index].open))
                //(!!$agent &&(root.title=='炮灰域名' || root.title=='直播' ||root.title=='限时抢券') ?root.hidden=false:root.hidden=true)
                if( Cookies.get("agent_id") && root.path!="vipGoodsList"&& root.path!="distributorMerchandise"){
                    root.hidden=true
                }
                //在代理端时，显示分享免单的路由
                // console.log("jjjjjssssssssssssss",root)
                if( Cookies.get("agent_id") && root.name=="freeofCharge"){
                      root.hidden=false
                }
                // if( Cookies.get("agent_id") && root.name=="freeofChargeSet"){
                //       root.hidden=false
                // }
                //  if( Cookies.get("agent_id") && root.name=="freeofClassify"){
                //       root.hidden=false
                // }
                 if( Cookies.get("agent_id") && root.name=="freeoForder"){
                      root.hidden=false
                }
                  childrenRoot.push(root);
              }
            })
          });

          this.roots = roots;
        }
      }

      this.$store.commit('SET_NAV_DATA',childrenRoot);

      // console.log("sidebar", data,childrenRoot);

    },

    rootsHandel() {
      /**
       * 新版应用
       */
      // console.log("路由", asyncPluginsMap);

      //清除一次this.$store.commit('SET_NAV_DATA',childrenRoot);
      this.$store.commit('SET_NAV_DATA',[]);

      //存在应用路由
      if (asyncPluginsMap instanceof Array && asyncPluginsMap.length > 0) {
        //存在子路由
        if (
          asyncPluginsMap[0] instanceof Object &&
          !!asyncPluginsMap[0].children
        ) {
          const rootPaths = asyncPluginsMap[0].children,
            roots = this.roots;

          rootPaths.map((root) => {
            // 主模块，并且模块存在
            if (
              !!root.app_is_model &&
              !!root.app_model &&
              !!roots[root.app_model]
            ) {
              roots[root.app_model].rootes.push({
                title: root.meta.title, //应用标题
                path: "/application/" + root.path, //应用路由
                app_index:root.app_index,
                root: root,
                param: root.app_param instanceof Object ? root.app_param : {}, //属性
              });
              // console.log("form-helpsdddd",app_index)
            }



          });
          // if(
          //           (res.app_index===true || (res.app_index in this.patSetting.plugin && !!this.patSetting.plugin[res.app_index].open))
          //           &&
          //           (!!Cookies.get("agent_id") &&(res.title=='炮灰域名' || res.title=='直播' ||res.title=='限时抢券') ?res.hidden=false:res.hidden=true)
          //         ){
          //         res.hid = true;
          //       }

          

          this.roots = roots;
        }
      }
      console.log('this.patSetting.plugin',this.patSetting.plugin);
      

      //  this.roots.map((item,index) => {
      //       // if(!!item.rootes){
      //       //   item.rootes.map((root,i) => {
      //       //     if(
      //       //       (root.app_index===true || (root.app_index in this.patSetting.plugin && !!this.patSetting.plugin[root.app_index].open))
      //       //       &&
      //       //       (!!Cookies.get("agent_id") &&(root.title=='炮灰域名' || root.title=='直播' ||root.title=='限时抢券') ?root.hidden=false:root.hidden=true)
      //       //     ){
      //       //       root.hid = true;
      //       //       }
      //       //   })
      //       // }
            
      //     })

      console.log("整理后路由", this.roots);
    },
  },
};
</script>
<style lang="scss" scoped>
.two-line-hide {
  margin-top: 5px;
  width: 260px;
  overflow: hidden; //超出文本隐藏
  text-overflow: ellipsis; //溢出省略号显示
  display: -webkit-box; //将对象作为弹性伸缩盒子
  -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列
  -webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....
}
.lihe-box {
  width: 350px;
  border: 1px solid #eeeeee;
  // background: #fff9f7;
  display: flex;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
}
.lihe-box:hover{
  width: 350px;
  // border: 1px solid #ccc;
  // background: #fff9f7;
  display: flex;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  border: 1px solid #1890FF;
  background:#E6F7FF;
}
// .active{
//   border: 1px solid #1890FF;
//   background:#E6F7FF;
// }
</style>